@import '@/styles/utils.scss';

.container {
  height: 100%;
  display: flex;
  background: #fff;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(1, 1fr); 
  grid-template-columns: 100%; 
  gap: 0px;
  overflow: auto;

  :global(.dark) & {
    background: #18181B;
  }

  .chat{
    min-width: 300px;
    height: 100%;
    display: flex;
    justify-content: center;

    .chatCont{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        
    }

    .max800{
         max-width: 800px;
    }
  }
}


.openPreview {
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "left right"; 
  grid-template-columns: 70% 30%; 
  transition: all 0.3s;
  .chat{
    grid-area: right;
    width: 100%;
  }

  .preview{
    grid-area: left;
    margin-right: 24px;
    display: flex;
    justify-content: flex-end;
  }
}

.preview{
  display: none;
}